
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--<form action="" method="get">-->
    用户名:<input type="text" id="name" autocomplete ><br/><br/>
    密码:<input type="password" id="pwd" autocomplete ><br/>
    <input type="submit">

<!--</form>-->

<button id="btn">get方法</button>
<button id="btn2">post方法</button>
<button id="btn3">axios的get方法</button>
<button id="btn4">axios的post方法</button>
<br>

<button id="getUserById">getUserById</button>
<button id="modifyUser">modifyUser</button>
<button id="addUser">addUser</button>
<!--<button id="btn3">axios的get方法</button>-->
<!--<button id="btn4">axios的post方法</button>-->

<script src="js/utils/jQuery/index.js"></script>
<!--axios的引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<!--<script src="js/utils/bootstrap/css/bootstrap.min.css"></script>-->


<script>
    // post 请求
    $("#btn2").on("click",function(){
        var url = "http://localhost:8080/mvnPro_war/sf";
        var sendData = {
            "purId": '123456',
            "replyContent": 'wf',
            commentId: [1,2,3]
        }
       var sendData2 = JSON.stringify(sendData)
        //后台解析 变成paramJsonpurId=123456&replyContent=wf&commentId%5B%5D=1&commentId%5B%5D=2&commentId%5B%5D=3
        console.log(sendData)
        console.log(sendData2) // 后台解析成json
        $.ajax({
            type: 'post',
            url: url,
            data: sendData2,
            // contentType : 'application/json',
            // contentType : 'multipart/form-data',  一般用于上传文件
            contentType:"application/x-www-form-urlencoded", // 默认的
            // processData: false,
            // contentType: false,
            cache: false,
            async : false,

            // 如果dataType:'json' 则返回值必须为json格式  否则直接由error接管
            dataType: 'json',
            success: function(data,textStatus,jqXHR){
                //data可以接受println里面的东西
                console.log( data); //数据
                console.log( textStatus);// 状态
                console.log( jqXHR);// 整个XHR对象
            },
            fail: function(res){
                console.log( res); //数据
            },
            error: function(res){
                console.log( res); //数据
            }

        })
    })
    // get 请求
    $("#btn").on("click",function(){

        //获取两个文本框中内容
        var username = $("#name").val();
        var password = $("#pwd").val();
        //拼凑表单
        var params = {"username":username, "password":password,"test":[1,2,3]};
        //设置url，${pageContext.request.contextPath}这是el表达式
        var url = "http://localhost:8080/mvnPro_war/sf";
        //发送get请求
        $.ajax({
            type: "get",
            url,
            data: params,
            cache: false,
            async : false,
            // dataType: 'json',
            beforeSend: function (xhr) {
                // 在所有发送请求的操作（open, send）之前执行
                console.log('beforeSend', xhr);
            },
            success: function (data ,textStatus, jqXHR){
                console.log( data); //数据
                console.log( textStatus);// 状态
                console.log( jqXHR);// 整个XHR对象

            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                console.log( XMLHttpRequest);
                // console.log( textStatus);
                // console.log( errorThrown);

            },
            complete: function (xhr) {
                // 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
                console.log('最后', xhr);
            }
        });
    });
    /* $.ajax({
               url: url,
               type: 'get',
               data:params,
               beforeSend: function (xhr) {
                   // 在所有发送请求的操作（open, send）之前执行
                   console.log('beforeSend', xhr);
               },
               success: function (res) {
                   // 只有请求成功（状态码为200）才会执行这个函数
                   console.log(res);
               },
               error: function (xhr) {
                   // 只有请求不正常（状态码不为200）才会执行
                   console.log('error', xhr);
               },
               complete: function (xhr) {
                   // 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
                   console.log('complete', xhr);
               }
           });*/
    // 发送 get 请求
    $("#btn3").on("click",function(){
        // 获取远端图片
        axios({
            method:'get',
            url:'http://localhost:8080/mvnPro_war/us',
            params: {
                ID: 12345,
                password:2010,
                username:"wfs"
            }
        }).then(function(response) {
                console.log(response)
            });
    })
    // 发送 POST 请求
    $("#btn4").on("click",function(){
        axios({
            method: 'post',
            url: 'http://localhost:8080/mvnPro_war/sf',
            data: {
                firstName: 'Fred',
                lastName: 'Flintstone'
            }
        });
    })



    // getUserById
    $("#getUserById").on("click",function(){
        var params = {type:'getUserById'};
        //设置url，${pageContext.request.contextPath}这是el表达式
        var url = "http://localhost:8080/mvnPro_war/us";
        //发送get请求
        $.ajax({
            type: "get",
            url,
            data: params,
            cache: false,
            async : false,
            // dataType: 'json',
            beforeSend: function (xhr) {
                // 在所有发送请求的操作（open, send）之前执行
                console.log('beforeSend', xhr);
            },
            success: function (data ,textStatus, jqXHR){
                console.log( data); //数据
                console.log( textStatus);// 状态
                console.log( jqXHR);// 整个XHR对象

            },
            error:function (XMLHttpRequest, textStatus, errorThrown) {
                console.log( XMLHttpRequest);
                // console.log( textStatus);
                // console.log( errorThrown);

            },
            complete: function (xhr) {
                // 不管是成功还是失败都是完成，都会执行这个 complete 函数(一般成功与失败都需要执行的操作写在这里)
                console.log('最后', xhr);
            }
        });
    });

    $("#modifyUser").on("click",function(){
        var url = "http://localhost:8080/mvnPro_war/us";
        var sendData = {
           type:'modify'
        }
        var sendData2 = JSON.stringify(sendData)
        //后台解析 变成paramJsonpurId=123456&replyContent=wf&commentId%5B%5D=1&commentId%5B%5D=2&commentId%5B%5D=3
        console.log(sendData)
        console.log(sendData2) // 后台解析成json
        $.ajax({
            type: 'post',
            url: url,
            data: sendData2,
            // contentType : 'application/json',
            // contentType : 'multipart/form-data',  一般用于上传文件
            contentType:"application/x-www-form-urlencoded", // 默认的
            // processData: false,
            // contentType: false,
            cache: false,
            async : false,

            // 如果dataType:'json' 则返回值必须为json格式  否则直接由error接管
            dataType: 'json',
            success: function(data,textStatus,jqXHR){
                //data可以接受println里面的东西
                console.log( data); //数据
                console.log( textStatus);// 状态
                console.log( jqXHR);// 整个XHR对象
            },
            fail: function(res){
                console.log( res); //数据
            },
            error: function(res){
                console.log( res); //数据
            }

        })
    })

    $("#addUser").on("click",function(){
        var url = "http://localhost:8080/mvnPro_war/us";
        var sendData = {
            type:'addUser'
        }
        var sendData2 = JSON.stringify(sendData)
        //后台解析 变成paramJsonpurId=123456&replyContent=wf&commentId%5B%5D=1&commentId%5B%5D=2&commentId%5B%5D=3
        console.log(sendData)
        console.log(sendData2) // 后台解析成json
        $.ajax({
            type: 'post',
            url: url,
            data: sendData2,
            // contentType : 'application/json',
            // contentType : 'multipart/form-data',  一般用于上传文件
            contentType:"application/x-www-form-urlencoded", // 默认的
            // processData: false,
            // contentType: false,
            cache: false,
            async : false,

            // 如果dataType:'json' 则返回值必须为json格式  否则直接由error接管
            dataType: 'json',
            success: function(data,textStatus,jqXHR){
                //data可以接受println里面的东西
                console.log( data); //数据
                console.log( textStatus);// 状态
                console.log( jqXHR);// 整个XHR对象
            },
            fail: function(res){
                console.log( res); //数据
            },
            error: function(res){
                console.log( res); //数据
            }

        })
    })
</script>
</body>
</html>